<template>
	<ul class="header" :class="{gradual:gradual}"
		:style="Object.assign({}, customizedStyle, { marginTop: dynamicMarginTop })">
		<li class="left" @click.prevent="back">
			<a href="" v-if="!noLeft" :style="leftStyle">
				<i class="zhk-nav_back"></i>
			</a>
		</li>
		<li class="middle" @click.stop="middleOpertation">{{middleTitle||""}}
			<slot name="slotMiddle"></slot>
		</li>
		<li class="right" :class="{rightDisabled:rightDisabled}" @click.stop="opertation">{{rightTitle||""}}
			<slot></slot>
		</li>
		<li class="slot2" @click.stop="opertation2">
			<slot name="slot2"></slot>
		</li>
	</ul>
</template>

<script>
	import Vue from "vue";
	// import config from "../../base/profile/config.json";
	// import jsBridge from "../../tools/jsBridge.js";
	// import {MessageBox } from "mint-ui";
	export default {
		name: "customHeader",
		data() {
			return {
				hasClickTime: 0,
				hasClickTimeId: "",
				backClickTime: 0,
				backClickTimeId: "",
				closeToast: '',
				dynamicMarginTop: '0rpx'
			};
		},

		props: {
			leftTitle: String,
			rightTitle: String,
			middleTitle: String,
			rightDisabled: {
				type: Boolean,
				default: false,
			},
			noLeft: {
				type: Boolean,
				required: false,
				default: false,
			},
			//背景渐变色
			gradual: {
				type: Boolean,
				required: false,
				default: false,
			},
			jsBridgeBack: {
				type: Boolean,
				default: true,
			},
			customizedStyle: {
				type: Object,
				default: () => ({})
			},
			leftStyle: {
				type: Object,
				default: () => ({})
			}
		},
		methods: {
			bindBackEvent: function() {
				let self = this;
				// if(this.jsBridgeBack){
				// jsBridge.addBackEventListener(function() {
				//   self.back();
				//   return false;
				// });
				// }
			},
			back() {
				if (this.noLeft) {
					return;
				}
				// window.CommonUtil.clearInputFocusWhenBack();
				// setTimeout(() => {
				//   if (this.$listeners.leftCallBack) {
				//     //如果监听返回按钮就走父组件监听函数，如果没有监听就默认走路由返回
				//     this.$emit("leftCallBack");
				//   } else {
				//     MessageBox.close();

				//     if(String(this.$route.query.close) == 'true'){
				//       if (this.middleTitle == '待办事项' || this.middleTitle == '系统消息') {
				//         jsBridge.routerBeforeEach({toName: 'MessagePage'});
				//       }

				//       jsBridge.closeWindow();
				//     }else{
				//       this.$router.back();
				//     }
				//   }
				// }, 100);
			},
			opertation() {
				this.$emit("rightCallBack");
			},
			opertation2() {
				this.$emit("rightCallBack2");
			},
			middleOpertation() {
				this.$emit("middleCallBack");
			}
		},
		mounted() {
			uni.getSystemInfo({
				success: (res) => {
					console.log(res, 99);
					const cha = res.screenHeight - res.windowHeight + 50;
					uni.createSelectorQuery().select('.header').fields({
						node: true,
						size: true
					}).exec((res) => {
						if (res) {

							this.dynamicMarginTop = cha + "rpx"
							console.log(cha, 11);
							console.log(this.dynamicMarginTop);

						}
					});

				}
			});
			this.bindBackEvent();


		}
	};
</script>
<style lang='scss' scoped>
	@import "header";
</style>